<template>
  <div>
    <div class="carousel-container">
      <div class="leftArrow">
        <el-button :disabled="currentIndex === 0" type="primary" @click="prevSlide">Previous</el-button>
      </div>
      <el-carousel @change="updateCurrentIndex" ref="myCarousel" :height="carouselHeight" :autoplay="false"
        arrow="never" indicator-position="none">
        <el-carousel-item v-for="(item, index) in items" :key="index">
          <div class="carousel-item-wrapper">
            <img v-for="(subItem, subIndex) in getItemsInSlide(index)" :key="subIndex" :src="subItem"
              class="carousel-image" />
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="rightArrow">
        <!-- 
        :disabled="((currentIndex +1) * 3) > items.length - 1"
        -->
        <el-button type="primary"   :disabled="((currentIndex +1) * 3) > items.length - 1" @click="nextSlide"
          style="margin-left: 20px;">{{ currentIndex * 3 }} {{items.length - 1}}Next</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {  
    return {  
      carouselHeight: '200px', // 根据需要调整高度  
      items: [  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        'https://via.placeholder.com/50',  
        // 添加更多图片URL  
      ],  
      currentIndex: 0, // 当前轮播图的索引  
    };  
  },  
  methods: {  
    updateCurrentIndex(newIndex) {  
       // 更新当前索引为提供的新索引
       this.currentIndex = newIndex;  
       console.log(newIndex)
    }, 
    getItemsInSlide(index) {  
      // 定义每个幻灯片应显示的项目数量 
      const itemsPerSlide = 3;  
       // 计算获取项目数组的起始索引 
      const start = index * itemsPerSlide;  
      // 计算获取项目数组的结束索引  
      const end = start + itemsPerSlide;  
      // 返回与当前幻灯片对应的项目切片  
      return this.items.slice(start, end);  
    },  
    prevSlide() {  
       // 检查当前索引是否大于0（确保有前一幻灯片）
      if (this.currentIndex > 0) {  
        // 调用幻灯片引用的 prev 方法以返回到前一幻灯片  
        this.$refs.myCarousel.prev();  
      }  
    },  
    nextSlide() {  
        // 检查当前索引是否小于项目总数减一（确保有下一幻灯片）
      if (this.currentIndex < this.items.length - 1) {  
          // 调用幻灯片引用的 next 方法以前往下一幻灯片
        this.$refs.myCarousel.next();  
      }  

    }, 
  },  
}
</script>

<style>
.carousel-container {  
  overflow: hidden;  
  position: relative;
  width: 100%;
}  
  .leftArrow{
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 100;
  }
  .leftArrow img{
      width: 30px;
      height: 30px;
    }
    .rightArrow{
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 100;
  }
  .rightArrow img{
      width: 30px;
      height: 30px;
    }
.carousel-item-wrapper {  
  display: flex;  
  justify-content: space-between;  
}  
  
.carousel-image {  
  width: calc(25% - 10px); /* 每张图片占父容器的25%，减去一些间距 */  
  height: 100%;  
  object-fit: cover;  
  margin: 0 5px; /* 图片之间的间距 */  
}  
</style>